<template>
	<div class="login-wrapper" :class="{ 'detail-login' : page !== 'login'}">
		<div class="login-title">
		  <!--登录-->
			<template v-if="page === 'login'">
				{{ $tc('message.login', 1) }}
			</template>
			<template v-else>
				{{ $tc('message.login', 2) }}
			</template>
		</div>

		<input type="text" class="name input" ref="username" v-model="username" :class="{ 'input-error' : errorStatus === 1 || errorStatus === 3 }" :placeholder="$t('message.userName')">

		<input type="password" class="pwd input" v-model="password" :placeholder="$t('message.pwd')" :class="{ 'input-error': errorStatus === 2 || errorStatus === 3 }" @keyup.enter="login">

    <!-- 错误提示 -->
		<div class="error-tips" v-if="errorText">
			{{ errorText }}
		</div>
		<!--忘记密码-->
		<div class="forget" :class="{ 'error-forget': error }">
			<router-link to="/find">{{ $t('message.forgetPwd') }}？</router-link>
		</div>
		<!--登录-->
		<button type="button" class="btn" @click="login"><span :class="{ 'btn-loading': isLoading }">{{ $tc('message.login') }}</span></button>
		<!--没有账号？免费注册-->
		<div class="register" :class="{ 'error-register': error }">
			{{$t('message.noAccount')}}？
			<router-link to="/register">{{ $t('message.freeRegister') }}</router-link>
		</div>
	</div>
</template>

<script>
import { setCookie } from '@/util/util'
export default {
  name: 'Login',
  props: {
    page: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      username: '',
      password: '',
      error: false,
      errorStatus: 0,
      isLoading: false
    }
  },
  computed: {
    errorText () {
      switch (this.errorStatus) {
        case 0:
          this.error = false
          return ''
        case 1:
          this.error = true
          return this.$t('message.nameError')
        case 2:
          this.error = true
          return this.$t('message.passwordError')
        case 3:
          this.error = true
          return this.$t('message.nameOrPasswordError')
        case 4:
          this.error = true
          return this.$t('message.loginTimesError')
      }
    }
  },
  watch: {
    username () {
      this.errorStatus = 0
    },
    password () {
      this.errorStatus = 0
    }
  },
  mounted () {
    this.$refs.username.focus()
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
  },
  methods: {
    login () {
      this.errorStatus = 0
      if (this.username === '') {
        this.errorStatus = 1
        return
      }
      if (this.password === '') {
        this.errorStatus = 2
        return
      }
      if (this.errorStatus === 0) {
        this.isLoading = true
        this.$ajax.userLogin(this.username, this.password).then((res) => {
          this.isLoading = false
          if (res.code === 200) {
            setCookie('username', res.data.user_name)
            setCookie('profile', res.data.head_portrait)
            setCookie('unreadMsg', res.data.unread_message_count)
            this.$store.commit('updateLoginUser', {
              username: res.data.user_name,
              profile: res.data.head_portrait,
              unreadMsg: res.data.unread_message_count
            })
            this.username = ''
            console.log(78, this.$route.query.redirect)
            if (this.$route.query.redirect === undefined) {
              if (this.page === 'login') {
                this.$router.push({ path: '/' })
              } else {
                this.$emit('on-close')
              }
            } else {
              let a = this.$route.query
              console.log(88, a)
              this.$router.push({path: this.$route.query.redirect})
            }
          } else if (res.code === 205) {
            this.errorStatus = 4
          } else {
            this.errorStatus = 3
          }
        }).catch((err) => {
          this.isLoading = false
          this.$store.commit('alert', {
            switch: true
          })
        })
      }
    }
  },
  destoryed () {
    this.username = ''
    this.password = ''
  }
}
</script>

<style scoped>
.login-wrapper {
	overflow: hidden;
}

.login-title {
	height: 33px;
	line-height: 33px;
	color: #333;
	font-size: 24px;
	text-align: center;
}

.input {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	border: 1px solid #d7d7d7;
	box-sizing: border-box;
	font-size: 14px;
	color: #333;
	border-radius: 2px;
}

.name {
	margin-top: 60px;
}

.pwd {
	margin-top: 24px;
}

.wrong {
	border: 1px solid #ff600a;
}

.forget {
	height: 17px;
	line-height: 17px;
	margin-top: 24px;

}

.forget a {
	font-size: 12px;
	color: #676767;
}

.btn {
	width: 100%;
	height: 48px;
	background: #ff600a;
	border: none;
	border-radius: 2px;
	font-size: 16px;
	color: #fff;
	margin-top: 24px;
	cursor: pointer;
}

.register {
	height: 17px;
	line-height: 17px;
	font-size: 12px;
	color: #676767;
	text-align: center;
	margin-top: 40px;
	padding-bottom: 100px;
}

.register a {
	color: #ff600a;
}

.login-wrapper .error-forget {
	margin-top: 22px;
}

.login-wrapper .error-register {
	padding-bottom: 70px;
}

.detail-login .login-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	padding-top: 40px;
}

.detail-login .name {
	margin-top: 40px;
}

.detail-login .register {
	margin-top: 24px;
	padding-bottom: 40px;
}

.detail-login .error-forget {
	margin-top: 12px;
}

.detail-login .error-register {
	padding-bottom: 20px;
}
</style>
